<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>state</title>
</head>

<body>
    <h1>state</h1>
    <ol>
        <li>使用state不能使用无状态组件</li>
        <li>使用state需要在构造方法中初始化</li>
        <li>调用setState({key:value})来设置state的新值</li>
    </ol>
    <hr />
    <div id="demoReact"></div>
    <script src="../../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../../node_modules/react/umd/react.development.js"></script>
    <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">

        function MyCom() {

            const [name,setName] = useState("奉先");

            return (
                <div>
                    <button onClick={() => { setState({ name: "Hydra" }) }}>点击我改变数据</button>
                    <div>我是一个函数组件：{name}</div>
                </div>
            )
            
        }

        // 创建根节点
        let root = ReactDOM.createRoot(document.getElementById("demoReact"));

        // 渲染组件
        root.render(<MyCom />);

    </script>
</body>

</html>